<style>
    /* 页眉 */
    .m-header {
        width: 100%;
        margin: 0 auto;
        color: #fff;
        height: 44px;
        overflow: hidden;
        position: relative;
        top: 0;
        background: #d71311;
        padding-top: var(--status-bar-height);
    }

    .m-header-right {
        bottom: 0;
    }

    .m-header-right2 {
        right: 60px;
        position: absolute;
        bottom: 0px;
    }

    .g-header .m-icon {
        float: left;
    }

    .g-header .m-title {
        text-align: center;
        position: relative;
        left: -10upx;
        font-size: 30upx;
        font-weight: bold;
    }

    .m-header .m-header-child {
        width: 33%;
        float: left;
        height: 100%;
    }

    .m-finish view {
        width: 50%;
        float: left;
        text-align: right;
    }
    
    /* 商品 */
    .g-product-box {
        background: #f5f5f5;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .m-product-part {
        width: 730upx;
        margin: 0 auto;
        height: 100%;
    }

    .m-date {
        height: 94upx;
        line-height: 94upx;
        text-indent: 32upx;
        font-size: 38upx;
    }

    .m-product-list-box {
        width: 730upx;
        margin: 0 auto;
        height: 100%;
        overflow: hidden;
    }

    .m-product {
        width: 359upx;
        height: 587upx;
        overflow: hidden;
        float: left;
        background: #fff;
        margin-bottom: 12upx;
        position: relative;
    }

    .m-product:nth-child(2n-1) {
        margin-right: 12upx;
    }

    .m-product .product-img {
        width: 359upx;
        height: 359upx;
        overflow: hidden;
    }

    .m-product-info {
        width: 325upx;
        margin: 0 auto;
    }

    .u-product-title {
        width: 100%;
        font-size: 25upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 15upx;
    }

    .u-progress {
        width: 260upx;
        height: 25upx;
        background: #fdd0d0;
        border-radius: 25upx;
        margin-top: 26upx;
        position: relative;
    }

    .u-progress-have {
        position: absolute;
        height: 100%;
        background: #d71311;
        border-radius: 25upx;
    }

    .u-progress-siblings {
        font-size: 24upx;
        -webkit-text-size-adjust: none;
        -webkit-transform: scale(0.8);
        color: #fff;
        text-align: center;
        position: absolute;
        height: 100%;
        line-height: 25upx;
        z-index: 99;
        right: -60upx;
        color: #d71611;
    }

    .u-product-price-box {
        height: 29upx;
        line-height: 29upx;
        margin-top: 35upx;
        position: relative;
        display: flex;
    }

    .u-product-price-l {
        float: left;
        color: #d71311;
    }

    .u-product-price-mark {
        float: left;
        font-size: 24upx;
        position: relative;
        top: 3upx;
    }

    .u-product-price {
        font-size: 35upx;
        margin-left: 3upx;
        float: left;
        margin-right: 11upx;
    }

    .u-product-surplus-people {
        float: left;
        color: #6d6b6b;
        font-size: 12upx;
        margin-right: 20upx;
    }

    .u-product-user-list {
        float: left;
        background: #f51c3c;
        color: #fff;
        height: 50upx;
        width: 70upx;
        text-align: center;
        line-height: 50upx;
        border-radius: 25upx;
        position: absolute;
        right: 0;
        bottom: -4upx;
    }

    .u-select-sign {
        position: absolute;
        top: 17upx;
        right: 15upx;
    }
        .g-price {
        font-size: 32upx;
        color: #fe0000;
        margin-right: 5px;
        display: inline-flex;
    }
    
    .g-price text {
        font-size: 24upx;
    }
    
    .g-remain {
        color: #ccc;
        font-size: 24upx;
    }
</style>
<template>
    <view class="page">
        <view class="m-header">
            <view class="m-icon m-header-left" @tap="back">
                <arrow size="50" color="#fff" direction="left"></arrow>
            </view>
            <text>浏览记录</text>
            <button class="m-header-right2 m-btn" @tap="clear">清空</button>
            <button class="m-header-right m-btn" @tap="fEdit">{{edit ? '删除' : '编辑'}}</button>
        </view>
        <view class="g-product-box">
            <view class="m-product-part">
                <view class="m-date">1月3日</view>
                <view class="m-product-list-box">
                    <button class="m-product" @tap="productTap" v-for="(item,index) in aProduct" :key="index"
                        :data-index="index">
                        <view class="m-product-info">
                            <view class="u-product-title">{{item.name}}</view>
                            <view class="u-progress">
                                <view class="u-progress-siblings">{{item.per}}%</view>
                                <view class="u-progress-have" style="width: 10%;"></view>
                            </view>
                            <view class="u-product-price-box">
                                <text class="g-price"><text>￥</text>{{item.price}}</text>
                                <text class="g-remain">剩余10人</text>
                                <view class="u-product-user-list">抢</view>
                            </view>
                        </view>
                        <radio class="u-select-sign" :checked="item.select" color="#d71611" v-if="edit" @tap="productTap"/>
                    </button>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                edit: false, // 是否编辑状态
                aProduct: [{
                    name: "【8折区】高领毛衣女套头秋冬新款女装时尚女br545女装时尚女br545女装时尚女br545",
                    per: '25',
                    price: 339,
                    select: false,

                }, {
                    name: "【8折区】高领毛衣女套头秋冬新款女装时尚女br545女装时尚女br545女装时尚女br545",
                    per: '29',
                    price: 329,
                    select: false,

                },],
            };
        },
        methods: {
            fEdit() { // 编辑
                if (this.edit) {
                    let result = this.aProduct.filter((item)=>{
                        return !item.select;
                    });
                    this.aProduct = result;
                }
                this.edit = !this.edit;
            },
            clear() { // 清空
                this.aProduct = [];
            },
            productTap(e) {
                if (this.edit) { // 编辑状态
                    let index = e.currentTarget.dataset.index;
                    let aProduct = this.aProduct;
                    this.aProduct[index].select = !this.aProduct[index].select;
                } else { // 点击跳转链接
                    uni.navigateTo({
                        url: '/pages/ydt/product_detail'
                    })
                }
            },
            back() {
                uni.navigateBack();
            }
        }
    }
</script>
